<template>
  <view class="wrap">
    <!-- <img class="imgBG" src="@/static/image/hxBG.png" alt="" /> -->
    <image class="imgBG" mode="aspectFill" src="@/static/image/hxBG.png" />
    <view class="content">
      <view class="header">
        <view class="time">
          <text class="name">时间</text>
          <text class="name">{{ startTime }}</text>
        </view>
        <view class="fraction">
          <text class="name">分数</text>
          <up-count-to :startVal="0" :endVal="countValue" />
        </view>
      </view>
      <view class="targetWrap">
        <view class="title">目标数字</view>
        <text class="num">{{ randomNum }}</text>
      </view>
      <view class="searchTitle">找到目标数字并划消：</view>
      <view class="listWrap">
        <view class="listBg" />
        <view class="listBgTwo" />
        <view
          :class="[
            'listWraps cf',
            sdNum == 4
              ? 'listWrapsFour'
              : sdNum == 5
                ? 'listWrapsFive'
                : sdNum == 6
                  ? 'listWrapsSix'
                  : ''
          ]"
          v-if="sdNum == 4 || sdNum == 5 || sdNum == 6"
        >
          <view
            :class="['items', item.active == 'on' ? 'on' : item.active == 'error' ? 'error' : '']"
            @click="fillIn(item, index)"
            v-for="(item, index) in rightList"
            :key="index"
          >
            <!-- activeOn == index ? 'active' : '' -->
            {{ item.num }}
          </view>
        </view>
        <view class="listWraps empty listWrapsFour cf" v-else>
          <view class="items" v-for="(item, index) in 16" :key="index"> {{ index + 1 }}</view>
        </view>
      </view>
    </view>
    <view class="zhezhao" v-if="zhezhaoShow">
      <text class="bg" />
      <view class="zhezhaoWrap" v-if="chooseShow">
        <view class="title">选择难度</view>
        <view class="btnWrap">
          <view class="btn" @click="chooseLevel(4)">
            <img class="img" src="@/static/image/hxBtn.png" alt="" />
            <text class="name">简 单</text>
          </view>
          <view class="btn" @click="chooseLevel(5)">
            <img class="img" src="@/static/image/hxBtn.png" alt="" />
            <text class="name">普 通</text>
          </view>
          <view class="btn" @click="chooseLevel(6)">
            <img class="img" src="@/static/image/hxBtn.png" alt="" />
            <text class="name">困 难</text>
          </view>
        </view>
      </view>
      <view class="startGame" v-else>
        <view class="btnWrap">
          <view class="btn" @click="startGameFun">
            <img class="img" src="@/static/image/hxBtn.png" alt="" />
            <text class="name">开始游戏</text>
          </view>
        </view>
      </view>
    </view>
    <view
      :class="['zhezhao zhezhaoState', zhezhaoShowState == true ? 'on' : '']"
      class="zhezhao zhezhaoState"
      v-if="zhezhaoShowState"
    >
      <text class="bg" />
      <view class="zhezhaoStateWrap">
        <view>
          <view class="title">完成训练!</view>
          <view class="consuming">
            <text class="name" />
            <up-count-to :startVal="0" :endVal="countTotalValue" />
            <text class="name mr24">分</text>
          </view>
        </view>
        <view class="btnWrap">
          <view class="btn" @click="trainAgain(1)">
            <img class="img" src="@/static/image/hxBtn.png" alt="" />
            <text class="name">再次训练</text>
          </view>
          <view class="btn" @click="trainAgain(2)">
            <img class="img" src="@/static/image/hxBtn.png" alt="" />
            <text class="name">退出训练</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onUnload } from '@dcloudio/uni-app'
// import uCountTo from 'uview-plus/components/u-count-to/u-count-to.vue'
//选择难度
// const zhezhaoShow = ref(false)
const zhezhaoShow = ref(true)
const chooseShow = ref(true)
//
const sdNum = ref(0)
const sdNumOld = ref(0)
const countValue = ref(0)
const countTotalValue = ref(0)
// 随机值
const randomNum = ref(1)
const rightList = ref([])
const zhezhaoShowState = ref(false)
const repeatAllNum = ref(0)
const repeatStartActive = ref(0)
const repeatActiveNum = ref(0)
// 高亮
const activeOn = ref(null)
const activeOnTwo = ref(null)
const timmerActive = ref(null)
//
//

// 重复的随机值 次数
const repeatNum = ref(0)
// 倒计时时间 判断是否暂停
const goToState = ref(false)
const timmer = ref(null)
const startTime = ref('03 : 00')
const stopTime = ref(0)
const newDateTime = ref(0)
//

onShow(() => {
  const game3Hide = uni.getStorageSync('game3Hide')
  if (game3Hide && game3Hide == 'true') {
    console.log(game3Hide)
  } else {
    zhezhaoShow.value = true
    startTime.value = '03 : 00'
    countValue.value = 0
    randomNum.value = 1
    timmer.value = null
    sdNum.value = 0
    sdNumOld.value = 0
    rightList.value = []
    goToState.value = false
    chooseShow.value = true
    repeatNum.value = 0
    stopTime.value = 0
    newDateTime.value = 0
    zhezhaoShowState.value = false
    repeatAllNum.value = 0
    repeatActiveNum.value = 0
    activeOn.value = null
    activeOnTwo.value = null
    timmerActive.value = null
    repeatStartActive.value = 0
  }
})
onUnload(() => {
  clearInterval(timmer.value)
  timmer.value = null
  uni.removeStorageSync('game3Hide')
})
const chooseLevel = (num) => {
  chooseShow.value = false
  sdNumOld.value = num
}
const startGameFun = () => {
  zhezhaoShow.value = false
  sdNum.value = sdNumOld.value
  if (sdNum.value == 4) {
    repeatAllNum.value = 6
    repeatActiveNum.value = 6
  } else if (sdNum.value == 5) {
    repeatAllNum.value = 10
    repeatActiveNum.value = 10
  } else {
    repeatAllNum.value = 14
    repeatActiveNum.value = 14
  }
  generateShuDu()
  startGame()
}
const playVideo = (str) => {
  const maps = {
    point: '/static/video/point.mp3',
    empty: '/static/video/empty.mp3',
    success: '/static/video/success.mp3'
  }

  let innerAudioContext = uni.createInnerAudioContext()
  innerAudioContext.autoplay = true
  innerAudioContext.src = maps[str]
  innerAudioContext.onPlay(() => {
    console.log('开始播放')
  })

  innerAudioContext.onEnded(() => {
    innerAudioContext.destroy()
    innerAudioContext = null
  })
}
// 初始化数独
const generateArr = () => {
  const arr = []
  if (sdNum.value == 4 || sdNum.value == 5) {
    for (let i = 0; i < sdNum.value; i++) {
      arr[i] = []
      for (let j = 0; j < sdNum.value; j++) {
        arr[i][j] = Math.floor(Math.random() * 9) + 1
      }
    }
  } else {
    for (let i = 0; i < sdNum.value; i++) {
      arr[i] = []
      for (let j = 0; j < 5; j++) {
        arr[i][j] = Math.floor(Math.random() * 9) + 1
      }
    }
  }
  return arr
}
const generateShuDu = () => {
  const arr = generateArr()
  console.log(11)
  console.log(arr)
  const duplicateRemoval = []
  let repeatNum = 0
  const randomValue = Math.floor(Math.random() * 9) + 1
  randomNum.value = randomValue
  //   console.log('duplicateRemoval', duplicateRemoval)
  //   randomNum.value = duplicateRemoval[randomValue]
  //   console.log('随机需要划消的值', randomNum.value)
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
      const obj = {
        active: '',
        isRead: false,
        disabled: false
      }
      //当前是  4*4
      if (sdNum.value == 4) {
        if (arr[i][j] == randomValue) {
          if (repeatNum >= repeatAllNum.value) {
            const number = Math.floor(Math.random() * 9) + 1
            if (number == randomValue) {
              if (randomValue == sdNum.value) {
                obj.num = Number(sdNum.value) - 1
              } else {
                obj.num = sdNum.value
              }
              duplicateRemoval.push(obj)
            } else {
              obj.num = number
              duplicateRemoval.push(obj)
            }
          } else {
            repeatNum = repeatNum + 1
            obj.num = arr[i][j]
            duplicateRemoval.push(obj)
          }
        } else {
          obj.num = arr[i][j]
          duplicateRemoval.push(obj)
        }
      } else if (sdNum.value == 5) {
        if (arr[i][j] == randomValue) {
          if (repeatNum >= repeatAllNum.value) {
            const number = Math.floor(Math.random() * 9) + 1
            if (number == randomValue) {
              if (randomValue == sdNum.value) {
                obj.num = Number(sdNum.value) - 1
              } else {
                obj.num = sdNum.value
              }
              duplicateRemoval.push(obj)
            } else {
              obj.num = number
              duplicateRemoval.push(obj)
            }
          } else {
            repeatNum = repeatNum + 1
            obj.num = arr[i][j]
            duplicateRemoval.push(obj)
          }
        } else {
          obj.num = arr[i][j]
          duplicateRemoval.push(obj)
        }
      } else {
        if (arr[i][j] == randomValue) {
          if (repeatNum >= repeatAllNum.value) {
            const number = Math.floor(Math.random() * 9) + 1
            if (number == randomValue) {
              if (randomValue == sdNum.value) {
                obj.num = Number(sdNum.value) - 1
              } else {
                obj.num = sdNum.value
              }
              duplicateRemoval.push(obj)
            } else {
              obj.num = number
              duplicateRemoval.push(obj)
            }
          } else {
            repeatNum = repeatNum + 1
            obj.num = arr[i][j]
            duplicateRemoval.push(obj)
          }
        } else {
          obj.num = arr[i][j]
          duplicateRemoval.push(obj)
        }
      }
    }
  }
  //   console.log(duplicateRemoval)
  console.log(22)
  console.log('随机需要划消的值：', randomValue)
  //   console.log('重复的次数1', repeatNum)
  //   console.log(duplicateRemoval)

  sortFun(duplicateRemoval, repeatNum)
}
// 数据去重和排序
const sortFun = (duplicateRemoval, repeatNum) => {
  console.log(duplicateRemoval)
  console.log('重复的次数2', repeatNum)
  const duplicateRemovalSort = JSON.parse(JSON.stringify(duplicateRemoval))
  let repeatNumSort = repeatNum
  if (sdNum.value == 4) {
    // console.log('随机需要划消的值一共出现的次数：88888', repeatNumSort)
    // console.log(duplicateRemovalSort)
    if (repeatNumSort < repeatAllNum.value) {
      for (let i = 0; i < duplicateRemovalSort.length; i++) {
        if (repeatNumSort >= repeatAllNum.value) {
          console.log('退出')
          console.log('最后的结果', duplicateRemovalSort)
          console.log(8877)
          rightList.value = randomsort(duplicateRemovalSort)
          console.log(rightList.value)
          return false
        } else {
          if (duplicateRemovalSort[i].num != randomNum.value) {
            duplicateRemovalSort[i].num = randomNum.value
            repeatNumSort = repeatNumSort + 1
          }
        }
      }
      //   console.log('最后的结果', duplicateRemovalSort)
    }
  } else if (sdNum.value == 5) {
    if (repeatNumSort < repeatAllNum.value) {
      for (let i = 0; i < duplicateRemovalSort.length; i++) {
        if (repeatNumSort >= repeatAllNum.value) {
          console.log('退出')
          console.log('最后的结果', duplicateRemovalSort)
          console.log(8877)
          rightList.value = randomsort(duplicateRemovalSort)
          console.log(rightList.value)
          return false
        } else {
          if (duplicateRemovalSort[i].num != randomNum.value) {
            duplicateRemovalSort[i].num = randomNum.value
            repeatNumSort = repeatNumSort + 1
          }
        }
      }
      //   console.log('最后的结果', duplicateRemovalSort)
    }
  } else {
    if (repeatNumSort < repeatAllNum.value) {
      for (let i = 0; i < duplicateRemovalSort.length; i++) {
        if (repeatNumSort >= repeatAllNum.value) {
          console.log('退出')
          console.log('最后的结果', duplicateRemovalSort)
          console.log(8877)
          rightList.value = randomsort(duplicateRemovalSort)
          console.log(rightList.value)
          return false
        } else {
          if (duplicateRemovalSort[i].num != randomNum.value) {
            duplicateRemovalSort[i].num = randomNum.value
            repeatNumSort = repeatNumSort + 1
          }
        }
      }
      //   console.log('最后的结果', duplicateRemovalSort)
    }
  }
  return true
}
// 数组随机
const randomsort = (list) => {
  const arr = JSON.parse(JSON.stringify(list))
  for (var i = 0, len = arr.length; i < len; i++) {
    var rand = parseInt(Math.random() * len)
    var temp = arr[rand]
    arr[rand] = arr[i]
    arr[i] = temp
  }
  return arr
}

// 点击开始计时
const startGame = () => {
  if (goToState.value == false) {
    goToState.value = true
    clearInterval(timmer.value)
    timmer.value = null
    startTime.value = '03 : 00'
    stopTime.value = new Date().getTime() + 3 * 60 * 1000
    // stopTime.value = new Date().getTime() + 5 * 1000
    timmer.value = setInterval(() => {
      newDateTime.value = stopTime.value - new Date().getTime()
      //   console.log('newDateTime', newDateTime.value)
      if (newDateTime.value <= 1) {
        startTime.value = '00 : 00'
        goToState.value = false
        clearInterval(timmer.value)
        timmer.value = null
        zhezhaoShowState.value = true
        console.log('游戏超时自动结束')
      } else {
        startTime.value = transformTime(newDateTime.value)
      }
    }, 1000)
  }
}
// 点击结束 计算分数
const endGame = () => {
  if (goToState.value == true) {
    goToState.value = false
    clearInterval(timmer.value)
    timmer.value = null
    const residueTime = transformTime(newDateTime.value, 'stop')
    console.log('剩余时间：', residueTime)
  }
}
// 时间转换
const transformTime = (date, state) => {
  var datetime = ''
  //计算出小时数
  var leave1 = date % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
  //计算相差分钟数
  var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
  var minutes =
    Math.floor(leave2 / (60 * 1000)) < 10
      ? '0' + Math.floor(leave2 / (60 * 1000))
      : Math.floor(leave2 / (60 * 1000))
  //计算相差秒数
  var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
  var seconds =
    Math.round(leave3 / 1000) < 10 ? '0' + Math.round(leave3 / 1000) : Math.round(leave3 / 1000)
  if (state == 'stop') {
    const secondsNum = Number(seconds) + Number(minutes) * 60
    return secondsNum
  } else {
    datetime = minutes + ' : ' + seconds
    return datetime
  }
}
const fillIn = (item, index) => {
  console.log(item)
  //   console.log(activeOn.value)
  console.log(index)
  activeOn.value = index
  if (activeOn.value !== activeOnTwo.value) {
    clearTimeout(timmerActive.value)
    timmerActive.value = null
    if (activeOnTwo.value != null) {
      rightList.value[activeOnTwo.value].active = ''
      rightList.value[activeOnTwo.value].isRead = false
    }
  }

  if (item.disabled == false && item.isRead == false) {
    item.isRead = true
    activeOnTwo.value = index
    if (item.num == randomNum.value) {
      activeOn.value = null
      activeOnTwo.value = null
      item.isRead = false
      item.disabled = true
      item.active = 'on'
      repeatStartActive.value++
      console.log('已经确认了几2个', repeatStartActive.value)
      console.log('需要确认了几个', repeatActiveNum.value)
      countValue.value = Number(countValue.value) + 10
      if (Number(repeatStartActive.value) == Number(repeatActiveNum.value)) {
        console.log('全部做完;了')
        playVideo('success')
        zhezhaoShowState.value = true
        clearInterval(timmer.value)
        timmer.value = null
        const residueTime = transformTime(newDateTime.value, 'stop')
        console.log('剩余时间：', residueTime)
        console.log((residueTime / 10).toFixed(0))

        countTotalValue.value = countValue.value + Number((residueTime / 10).toFixed(0))
      } else {
        playVideo('point')
      }
      console.log('正确')
      // playVideo('point')
      // playVideo('success')
    } else {
      console.log('错误')
      if (Number(countValue.value) - 5 <= 0) {
        countValue.value = 0
      } else {
        countValue.value = Number(countValue.value) - 5
      }
      playVideo('empty')
      item.active = 'error'
      timmerActive.value = setTimeout(() => {
        rightList.value[activeOnTwo.value].active = ''
        rightList.value[activeOnTwo.value].isRead = false
        activeOn.value = null
        activeOnTwo.value = null
        console.log(88888)
      }, 1600)
    }
  }
}
const trainAgain = (num) => {
  if (num == 1) {
    zhezhaoShow.value = true
    startTime.value = '03 : 00'
    countValue.value = 0
    randomNum.value = 1
    timmer.value = null
    sdNum.value = 0
    sdNumOld.value = 0
    rightList.value = []
    goToState.value = false
    chooseShow.value = true
    repeatNum.value = 0
    stopTime.value = 0
    newDateTime.value = 0
    zhezhaoShowState.value = false
    repeatAllNum.value = 0
    repeatActiveNum.value = 0
    activeOn.value = null
    activeOnTwo.value = null
    timmerActive.value = null
    repeatStartActive.value = 0
  } else {
    uni.reLaunch({
      url: '/pages/index/index'
    })
    console.log('退出训练')
    // uni.exitMiniProgram({
    //   success: function () {
    //     console.log('退出小程序成功')
    //   },
    //   fail: function (err) {
    //     console.log('退出小程序失败', err)
    //   }
    // })
  }
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}

.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: '.';
}

@keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate-two {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}

@keyframes error-active {
  0% {
    background: #fdf9f1;
  }

  25% {
    background: #ffd2d2;
  }

  50% {
    background: #fdf9f1;
  }

  75% {
    background: #ffd2d2;
  }

  100% {
    background: #fdf9f1;
  }
}

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  text-align: center;
  background: #d7f5f5;

  .imgBG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .content {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: calc(100% - 96rpx);
    height: 100%;
    text-align: left;

    .header {
      position: relative;
      margin-top: 48rpx;
      font-size: 48rpx;
      font-weight: 700;
      color: #065f43;

      .time {
        .name {
          display: inline-block;
          vertical-align: middle;

          &:nth-child(1) {
            margin-right: 16rpx;
          }
        }
      }

      .fraction {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);

        .name {
          display: inline-block;
          margin-right: 16rpx;
          vertical-align: middle;
        }

        ::v-deep .u-count-num {
          display: inline-block;
          font-size: 48rpx !important;
          font-weight: 700 !important;
          color: #065f43 !important;
          vertical-align: middle;
        }
      }
    }

    .targetWrap {
      position: relative;
      height: 294rpx;
      margin-top: 48rpx;
      font-weight: 700;
      text-align: center;
      border: 8rpx solid #035f42;
      border-radius: 24rpx;

      .title {
        margin-top: 16rpx;
        font-size: 40rpx;
        color: #013726;
      }

      .num {
        position: absolute;
        top: 30rpx;
        left: 50%;
        font-size: 208rpx;
        color: #013726;
        transform: translateX(-50%);
      }
    }

    .searchTitle {
      margin: 22rpx 0;
      font-size: 40rpx;
      font-weight: 700;
      color: #013726;
    }

    .listWrap {
      position: relative;

      .listBg {
        position: absolute;
        top: -8rpx;
        left: 50%;
        z-index: -1;
        width: 688rpx;
        height: 798rpx;
        padding: 8rpx;
        background: #035f42;
        border-radius: 24rpx;
        transform: translateX(-50%);
      }

      .listBgTwo {
        position: absolute;
        top: 8rpx;
        left: calc(50% + 16rpx);
        z-index: -2;
        width: 668rpx;
        height: 798rpx;
        padding: 8rpx;
        background: #408754;
        border-radius: 32rpx;
        transform: translateX(-50%);
      }

      .listWraps {
        position: absolute;
        top: 0;
        left: 50%;
        width: 672rpx;
        font-size: 0;
        text-align: left;
        background: #447968;
        border-radius: 24rpx;
        transform: translateX(-50%);

        .items {
          position: relative;
          float: left;
          font-size: 76rpx;
          font-weight: 700;
          text-align: center;
          background: #fdf9f1;
          border: 1rpx solid #035f42;
          border-radius: 16rpx;

          &.error {
            border-color: red;
            animation: error-active 1.5s forwards;
          }

          &.on {
            background: #9abfb3;

            &::after {
              position: absolute;
              top: 50%;
              left: 8%;
              width: 84%;
              height: 6rpx;
              content: '';
              background: #035f42;
              border-radius: 6rpx;
              transform: translateY(-50%);
            }
          }
        }

        &.empty {
          color: #fdf9f1;
        }

        &.listWrapsFour {
          .items {
            width: calc(25% - 2rpx);
            margin: 1rpx 2rpx 0 0;
            line-height: 191rpx;
          }
        }

        &.listWrapsFive,
        &.listWrapsSix {
          .items {
            width: calc(20% - 2rpx);
            margin: 1rpx 2rpx 0 0;
            line-height: 152rpx;
          }
        }

        &.listWrapsSix {
          .items {
            line-height: 126rpx;
          }
        }
      }
    }
  }

  .zhezhao {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100vh;

    .bg {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100vh;
      background: rgb(0 0 0 / 50%);
    }

    .zhezhaoWrap {
      position: fixed;
      top: 280rpx;
      left: 116rpx;
      z-index: 1;
      width: calc(100% - 232rpx);
      font-size: 48rpx;
      color: #fff;
      text-align: center;

      .btnWrap {
        margin-top: 128rpx;

        .btn {
          position: relative;
          height: 142rpx;
          margin-top: 50rpx;
          line-height: 122rpx;
          text-align: center;
          animation: rotate-two 1s infinite;

          &:nth-child(1) {
            margin-top: 0;
          }

          .img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
          }

          .name {
            position: relative;
            z-index: 1;
          }
        }
      }
    }

    .startGame {
      position: fixed;
      bottom: 300rpx;
      left: 116rpx;
      z-index: 1;
      width: calc(100% - 232rpx);
      font-size: 48rpx;
      color: #fff;
      text-align: center;

      .btnWrap {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);

        .btn {
          position: relative;
          height: 142rpx;
          margin-top: 50rpx;
          line-height: 122rpx;
          text-align: center;
          animation: rotate-two 1s infinite;

          &:nth-child(1) {
            margin-top: 0;
          }

          .img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
          }

          .name {
            position: relative;
            z-index: 1;
          }
        }
      }
    }

    &.zhezhaoState {
      position: fixed;
      top: 0;
      left: 0;

      .bg {
        background: rgb(0 0 0 / 70%);
      }

      .zhezhaoStateWrap {
        position: fixed;
        top: 184rpx;
        left: 0;
        z-index: 1;
        width: 100%;
        font-size: 64rpx;
        color: #fff;
        text-align: center;

        .consuming {
          margin-top: 112rpx;
          font-size: 48rpx;

          .name {
            &.mr24 {
              margin-right: 24rpx;
            }

            &.ml24 {
              margin-left: 24rpx;
            }
          }

          ::v-deep .u-count-num {
            font-size: 240rpx !important;
            font-weight: 700 !important;
            color: #fff !important;
          }
        }

        .btnWrap {
          width: calc(100% - 232rpx);
          margin: 128rpx auto 0;

          .btn {
            position: relative;
            height: 142rpx;
            margin-top: 50rpx;
            line-height: 110rpx;
            text-align: center;
            animation: rotate-two 1s infinite;

            &:nth-child(1) {
              margin-top: 0;
            }

            .img {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 0;
              width: 100%;
              height: 100%;
            }

            .name {
              position: relative;
              z-index: 1;
              font-size: 48rpx;
            }
          }
        }
      }

      &.on {
        animation: rotate 0.3s linear;
      }
    }
  }
}
</style>
